<template>
  <div class="mod-demo-echarts">
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="曝光时间" prop="fftTint">
            <el-input v-model="dataForm.fftTint" placeholder="曝光时间">
              <i
                slot="suffix"
                style="font-style:normal;margin-right: 10px; line-height: 30px;"
                >微秒</i
              >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="扫描频率" prop="frequency">
            <el-input v-model="dataForm.frequency" placeholder="扫描频率">
              <i
                slot="suffix"
                style="font-style:normal;margin-right: 10px; line-height: 30px;"
                >Hz</i
              >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="计算次数" prop="fftCount">
            <el-input v-model="dataForm.fftCount" placeholder="计算次数">
              <i
                slot="suffix"
                style="font-style:normal;margin-right: 10px; line-height: 30px;"
              ></i>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="光开关id" prop="switchId">
            <el-select
              v-model="dataForm.switchId"
              placeholder="请选择"
              @change="getConfig()"
            >
              <el-option
                v-for="item in switchOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="saveConfig()">
              保存设置
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="startDebugging()">{{
              this.dataForm.onoff == 0 ? "开始调试" : "正在调试中"
            }}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div id="J_chart" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  data() {
    return {
      chartLine: null,
      dataForm: {
        id: "",
        fftTint: "",
        frequency: "",
        fftCount: "",
        switchId: "",
        onoff: 0
      },
      // dataList: [],
      // pageIndex: 1,
      // pageSize: 10,
      // totalPage: 0,
      // dataListLoading: false,
      // dataListSelections: [],
      // addOrUpdateVisible: false
      xData: [],
      yData: [],
      switchOptions: [],
      timer: null //定时器名称
    };
  },

  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartLine) {
      this.chartLine.resize();
    }
  },
  mounted() {
    this.initData();
    this.timer = setInterval(() => {
      setTimeout(this.refreshPage, 0);
    }, 1000 * 600);
  },
  methods: {
    refreshPage() {
      location.reload();
    },
    initData() {
      this.$http({
        url: this.$http.adornUrl("/generator/debugging/echo/data"),
        method: "get"
      }).then(({ data }) => {
        this.xData = data.xData;
        this.yData = data.yData;
        this.dataForm.id = data.debugging.id;
        this.dataForm.fftTint = data.debugging.fftTint;
        this.dataForm.frequency = data.debugging.frequency;
        this.dataForm.fftCount = data.debugging.fftCount;
        this.dataForm.switchId = data.debugging.switchId;
        this.dataForm.onoff = data.debugging.onoff;
        this.switchOptions = data.switchOptions;
        this.initChart();
      });
    },

    initChart() {
      var option = null;
      option = {
        title: {
          text: "测试光谱图"
        },
        tooltip: {
          trigger: "axis"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              //yAxisIndex: "none"
            },
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.xData
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            type: "line",
            stack: "Total",
            data: this.yData
          }
        ]
      };
      this.chartLine = echarts.init(document.getElementById("J_chart"));
      this.chartLine.setOption(option);
      window.addEventListener("resize", () => {
        this.chartLine.resize();
      });
    },
    saveConfig() {
      this.$http({
        url: this.$http.adornUrl("/generator/debugging/saveConfig"),
        method: "post",
        data: this.dataForm
      }).then(({ data }) => {
        this.$message({
          type: "success",
          message: "修改成功!"
        });
      });
    },
    startDebugging() {
      this.$confirm(
        this.dataForm.onoff == 0 ? "您确定要开始调试?" : "您确定要结束调试?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl("/generator/debugging/startDebugging"),
          method: "post",
          data: this.dataForm
        }).then(({ data }) => {
          if (data.code == 0) {
            // this.$message({
            //   type: "success",
            //   message: "修改成功!"
            // });
            location.reload();
          }
        });
      });
    },
    getConfig() {
      this.$http({
        url: this.$http.adornUrl("/generator/debugging/getConfigBySwitchId"),
        method: "post",
        data: this.dataForm
      }).then(({ data }) => {
        this.xData = data.xData;
        this.yData = data.yData;
        this.dataForm.id = data.debugging.id;
        this.dataForm.fftTint = data.debugging.fftTint;
        this.dataForm.frequency = data.debugging.frequency;
        this.dataForm.fftCount = data.debugging.fftCount;
        this.dataForm.switchId = data.debugging.switchId;
        this.dataForm.onoff = data.debugging.onoff;
        this.$message({
          type: "success",
          message: "切换成功!"
        });
      });
    }
  }
};
</script>
<style lang="scss">
.mod-demo-echarts {
  > .el-alert {
    margin-bottom: 10px;
  }

  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;

    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }

  .chart-box {
    min-height: 380px;
  }
}
</style>
